<template>
	<view class="page">
		<!-- 顶部背景与导航 -->
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill" />
		<u-navbar title="土壤检测数据" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
			:titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder>
			<view class="u-nav-slot" slot="right">
				<view class="nav-export-btn" @click="add">添加</view>
			</view>
		</u-navbar>
		<view class="content">

			<!-- 列表 -->
			<view class="w-710 mgt bgff pl-32 pr-32 br-20 pt-20 pb-20" v-for="item in list" :key="item.id">
				<view class="rows rowsm mt-10">
					<view class="label">产品名称</view>
					:
					<view class="ml-10">{{ item.product }}</view>
				</view>
				<view class="rows rowsm mt-10">
					<view class="label">年份</view>
					:
					<view class="ml-10">{{ item.year }}</view>
				</view>
				<view class="rows rowsm mt-10">
					<view class="label">检测信息</view>
					:
					<view class="ml-10">{{ item.testInfo }}</view>
				</view>
				<view class="rows rowsm mt-10">
					<view class="label">检测结论</view>
					:
					<view class="ml-10">{{ item.conclusion }}</view>
				</view>
				<view class="rows rowsm mt-10">
					<view class="label">状态</view>
					:
					<view class="ml-10">{{ item.status }}</view>
				</view>
				<view class="rows rowsm mt-10">
					<view class="label">附件</view>
					:
					<view class="ml-10">{{ item.attachment }}</view>
				</view>
				<view class="rows rowsm mt-10">
					<view class="label">树种</view>
					:
					<view class="ml-10">{{ item.varieties }}</view>
				</view>
				<view class="rows rowsm mt-10">
					<view class="label">编制人</view>
					:
					<view class="ml-10">{{ item.preparedBy }}</view>
				</view>
				<view class="rows rowsm mt-10">
					<view class="label">审核人</view>
					:
					<view class="ml-10">{{ item.reviewer }}</view>
				</view>
				<view class="rows rowsm mt-10">
					<view class="label">批准人</view>
					:
					<view class="ml-10">{{ item.approver }}</view>
				</view>
				<view class="rows rowsm mt-10">
					<view class="label">判定结果</view>
					:
					<view class="ml-10">{{ item.decisionOutcomes }}</view>
				</view>
				<view class="rows rowsm mt-10">
					<view class="label">操作</view>
					:
					<view class="colfff bg rowsc rowsm w-200 h-64 br-16 ml-10">修改</view>
					<view class="colfff bg rowsc rowsm w-200 h-64 br-16 ml-10">删除</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import navbarMixin from '@/common/navbarMixin'
import { jcdlist } from '@/api/jcd'
export default {
	mixins: [navbarMixin],
	data() {
		return {
			filters: {
				keyword: '',
				year: '',
				type: '',
				region: '',
				sample: ''
			},

			list: []
		}
	},

	onLoad() {
		this.getList()
	},
	methods: {
		async getList() {
			const res = await jcdlist({
				pageNum: 1,
				pageSize: 10,
			})
			this.list = res.rows
		},
	}
}
</script>

<style lang="scss" scoped>
/* 绿色主题变量 */
$brand: #29a74d;
$brand-weak: #e9f7ee;
$brand-border: #cfe9db;
$brand-strong: #239243;

.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 180rpx;
	z-index: 2;
}

.page {
	background: #f6f7fb;
	min-height: 100vh;
}

.content {
	padding: 24rpx;
}

/* 顶部右侧导出按钮 */
.nav-export-btn {
	background: $brand-weak;
	color: $brand-strong;
	border-radius: 14rpx;
	height: 64rpx;
	line-height: 64rpx;
	padding: 0 26rpx;
	font-size: 26rpx;
	box-shadow: 0 2rpx 8rpx rgba(41, 167, 77, 0.10);
	border: 1rpx solid $brand-border;
}




.label {
	width: 160rpx;
	text-align: right;
	margin-right: 20rpx;
	flex-shrink: 0;
	// 两端对齐
	text-align: justify;
		text-align-last: justify;
}
</style>